/*
* @PersonInfo.vue
* @description 人员信息界面
* @author huangchuanshan
* @update (chenzhihui 2020/3/28)
*/
<template>
    <div id="main" v-show="this.$store.state.dataFlag">
        <!--筛选s搜索組件-->
        <Search-Comp ref='SearchComp'></Search-Comp>
        <!--人员信息表格-->
        <el-table
                :data="tableData"
                style="width: 100%;margin-top:0;margin-left: 10px;">
            <el-table-column v-for="item in tableHead" :key="item.prop"
                             :prop="item.prop"
                             :label="item.label"
                             :width="item.width">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showTrackDialog(scope.row)"><img
                            src="../static/image/查看行踪_on.png" alt=""></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--表格分页-->
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-size="page.limit"
                    layout="total, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </div>
        <!--轨迹信息弹窗-->
        <div class="gjstyle">
            <el-dialog
                    title="轨迹信息"
                    :visible.sync="dialogFlag"
                    width="30%">
                <el-table
                        :data="trackData"
                        style="width: 100%;
 height: 300px;
                 overflow-y: auto;">
                    <el-table-column
                            prop="itineraryDate"
                            label="录入时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="itinerary"
                            label="轨迹">
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                <el-button @click="backList">返回</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {baseServe} from "../request/api";
    import AxiosApi from "../request/axiosApi";
    import SearchComp from "../components/searchComp/SearchComp";

    export default {
        name: "PersonInfo",
        data() {
            return {
                //表格数据
                tableData: [],
                //分页参数
                page: {
                    //总条数
                    total: 30,
                    //每页条数
                    limit: 10,
                    //当前页数
                    pageNum: 1,
                    //实际返回的条数
                    dataLength: 7
                },
                dialogFlag: false,
                //表格头参数
                tableHead: [
                    {label: '录入日期', prop: 'recordTime', width: '180'},
                    {label: '姓名', prop: 'name', width: '180'},
                    {label: '性别', prop: 'sex', width: ''},
                    {label: '体温', prop: 'temperature', width: ''},
                    {label: '民族', prop: 'nationality', width: ''},
                    {label: '出生', prop: 'birth', width: ''},
                    {label: '住址', prop: 'address', width: ''},
                    {label: '身份证号', prop: 'cardNum', width: ''},
                ],
                //轨迹数据
                trackData: [],
            }
        },
        components: {
            SearchComp
        },
        mounted() {
            this.searchForPerson(this.$refs.SearchComp.searchForm)
        },
        watch: {
            //监听搜索参数变化，触发搜索方法，更新数据
            '$store.state.searchParam': function (nVal, oVal) {
                this.searchForPerson(nVal)
            },
        },
        methods: {
            /**
             *关闭弹窗方法
             */
            backList() {
                this.dialogFlag = false
                this.recoverData()
            },
            /**
             * 分页方法
             * @param page 分页参数
             */
            handleCurrentChange(page) {
                let param = {
                    pageNum: page,
                    pageSize: 5,
                    userRelatedQueryCondition: {}
                }
                this.searchForPerson(param)
            },
            /**
             * 查询方法
             * @param param 接口参数
             */
            searchForPerson(param) {
                let that = this;
                this.$AxiosApi.searchgj(param,'yqUrl').then(res => {
                    let obj = res.data.data.list
                    obj.map(i => {
                        if (i.sex === 'male') {
                            i.sex = '男'
                        }
                        if (i.sex === 'female') {
                            i.sex = '女'
                        }
                    })
                    that.tableData = obj
                    that.page.total = res.data.data.total
                    that.page.pageNum = res.data.data.pageNum
                })
            },
            /**
             * 轨迹数据查询(预留)
             * @param params 轨迹数据参数
             */
            showTrackDialog(params) {
                this.dialogFlag = true
                let param = {
                    pageNum: 1,
                    pageSize: 5,
                    userId: params.userId,
                    userRelatedQueryCondition: {}
                }
                this.$AxiosApi.getgjxx(param,'yqUrl').then(res => {
                    this.trackData = res.data.data.list
                })
            },
            /**
             * 复位数据
             */
            recoverData() {
                this.trackData = []
            }
        },
    }
</script>

<style lang="less">
    .gjstyle {
        .el-dialog {
            border-radius: 6px;

            .el-dialog__body {
                padding-top: 0;
            }

            .el-dialog__header {
                padding-top: 10px;
                height: 30px;
            }

            .el-dialog__title {
                font-size: 16px;
            }

            .el-table__header-wrapper {
                margin-top: 0;
            }

            .el-table__body-wrapper {
                height: auto;
            }

            .el-button {
                border-radius: 4px;
                height: 30px;
                width: 120px;
                align-items: center;
                line-height: 3px;

            }

            .el-button--default {
                border: 1px #0081dc solid;
                color: #0081dc;
            }
        }
    }

    .block {
        margin-left: 10px;

        .el-pagination__total {
            color: black;
        }

        .el-pagination button:disabled, .el-pager, .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
            color: black !important;
        }

        .el-pager {
            color: black;
        }
    }

    .el-table .warning-row {
        color: red;
    }

    .has-gutter {
        background-color: rgba(0, 0, 0, 0.2);
        color: #000000;
    }

    .el-table__body-wrapper {
        overflow-y: auto;
        height: 580px;
        position: relative;
    }

    .el-table__body tr:hover > td {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .el-table__body tr {
        color: #1a303a;
    }

    .el-table__header-wrapper {
        margin-left: 0px !important;
    }
</style>
